<template>
  <div class="bgy-screen-table">
    <div class="relative" v-show="SHOW_LOADING">
      <iframe src="" frameBorder="0" marginHeight="0" marginWidth="0" id="iframeBGI" :style="{width:`${innerWidth}px`}"></iframe>
      <div id="iframeBGC" :style="{height: `${contentHeight-50}px`,width:`${innerWidth-80}px`}">
        <div style="position: absolute;top: 50%;left: 55%;transform: translate(-50%,-50%);text-align: center">
          <img src="/static/images/bgy-loading.gif" alt="" >
          <div style="text-align: center;font-size: 18px;color: #00e5ff;">请勿关闭浏览器...</div>
        </div>
      </div>
    </div>
    <div class="bgy-screen-left" :style="{height: `${contentHeight}px`}">
      <zz-frame width="100%" height="100%">
        <zz-mulvideo :deviceVideoList="deviceVideoList" :projectNameObject="projectNameObject" @initSuccess="initSuccess" ref="mulvideo"></zz-mulvideo>
      </zz-frame>
    </div>
    <div class="bgy-screen-right">
      <zz-frame width="340px" height="95px" class="mb10" :padding="[17, 17, 17, 17]">
        <div class="left">
          <div>
            <span class="camera-online">在线摄像头:</span>
            <span class="camera-online-length">{{projectRate.dev}}</span>
            <span class="camera-arrow camera-up" v-show="projectRate.devStatus && projectRate.devStatus > 0">
              <i class="iconfont icon-jianyoushang" ref="devStatusUp"></i>{{projectRate.devStatus}}
            </span>
            <span class="camera-arrow camera-down" v-show="projectRate.devStatus && projectRate.devStatus < 0">
              <i class="iconfont icon-jianyouxia" ref="down"></i>{{-projectRate.devStatus}}
            </span>
          </div>
          <div class="mt10">
            <span class="camera-online">摄像头在线率:</span>
            <span class="camera-online-length">{{Math.round(projectRate.rate)}}%</span>
            <span class="camera-arrow camera-up" style="margin-top: 12px" v-show="projectRate.rateStatus && projectRate.rateStatus > 0">
              <i class="iconfont icon-jianyoushang" ref="up"></i>{{Math.round(projectRate.rateStatus)}}%
            </span>
            <span class="camera-arrow camera-down" style="margin-top: 12px"  v-show="projectRate.rateStatus && projectRate.rateStatus < 0">
              <i class="iconfont icon-jianyouxia" ref="rateStatusDown"></i>{{-Math.round(projectRate.rateStatus)}}%
            </span>
          </div>
        </div>
      </zz-frame>
      <zz-frame width="340px" class="relative" :height="`${projectHeight}px`" :padding="[17, 17, 17, 17]" >

          <p class="tableP-screen mb20"><span>摄像头列表</span></p>
          <!--<zz-search-->
          <!--background="rgba(0, 0, 0, 0.3)"-->
          <!--:width="306"-->
          <!--borderColor="#103751"></zz-search>-->
          <div
            class="relative"
            @mouseenter="initInterval(true)"
            @mouseleave="initInterval(false)">
            <div>
              <i class="iconfont icon-shexiangtou"
                 :style="{color:`${item.warnType ? 'red' : '#fff'}`}"
                 v-for="(item, index) in deviceVideoList"
                 ref="deviceVideoList"
                 :reverseindex="deviceVideoList.length - index"
                 @mouseenter="item.hover = true"
                 @mouseleave="item.hover = false"
                 ><span @click="enterSingleVideo(item)">{{item.cameraName}}</span>
                 <i v-show="item.warnType.includes('明火')" class="iconfont icon-right icon-huo" style="color: red" v-tooltip="'明火'" :class="item.warnType ? 'shrink-icon' : ''"></i>
                 <i v-show="item.warnType.includes('烟雾')" class="iconfont icon-right icon-yangantanceqi" style="color: red" v-tooltip="'烟雾'" :class="item.warnType ? 'shrink-icon' : ''"></i>
              </i>
            </div>
          </div>
        <div class="clear project-next">
          <div class="left" @click="prev" :class="{'project-not-allowed': pageNum === 1}"><i class="iconfont icon-t-arrow"></i></div>
          <div class="right" @click="next" :class="{'project-not-allowed': pageNum === pages}"><i class="iconfont icon-r-arrow"></i></div>
        </div>
      </zz-frame>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'screen-project',
    mixins: [mixin],
    data () {
      return {
        projectNameObject: '',
        interval: null,
        leaveIndex: 0,
        pageNum: 1,
        pages: 1,
        isFirstQuery: true,
        SHOW_LOADING: true,
        projectRate: {
          dev: 0,
          devStatus: 0,
          beforeDev: 0,
          devTotal: 0,
          beforeTotal: 0,
          rate: 0,
          rateStatus: 0
        },
        deviceVideoList: [],
        projectNode: null,
        warnList: [],
        warnListLength: 0,
        warnIndex: 0,
        warnListSet: new Set()
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        videoNode: 'getVideoNode',
        video: 'getVideo',
        incomingVideoListNode: 'incomingVideoListNode'
      })
    },
    watch: {
      video (newVal) {
        if (newVal.query) {
          this.reset(true)
        }
      },
      '$route' (to, from) {
        if (to.name === 'videoProject') {
          this.reset(false)
          this.getProjectOnlineRate()
        }
      },
      incomingVideoListNode (item) {
        this.warnListSet.add(item)
        this.warnList = [...this.warnListSet]
        for (let i in this.warnList) {
          this.setVideoListNode(this.warnList[i])
        }
        setTimeout(() => {
          this.warnListSet.delete(item)
          this.warnList = [...this.warnListSet]
          for (let i in this.warnList) {
            this.setVideoListNode(this.warnList[i])
          }
        }, 1000 * 60 * 3)
      },
      currentUser (newValue, oldValue) {
        if (newValue.stageId !== oldValue.stageId) {
          this.reset(true)
          this.getProjectOnlineRate()
        }
      }
    },
    activated () {
      this.getList()
      this.getProjectOnlineRate()
    },
    mounted () {
      this.projectNode = new this.$Node({
        group: `PROJECT_GROUP_${this.$route.query.pjId}`,
        mName: this.currentUser.mName
      })
    },
    beforeRouteLeave (to, from, next) {
      window.clearInterval(this.timer)
      if (this.projectNode.options.nodejsServer) {
        this.projectNode.logout()
      }
      next()
    },
    methods: {
      setVideoListNode (project) {
        this.deviceVideoList = this.deviceVideoList.map((obj) => {
          if (obj.deviceVideoUuid === project.deviceVideoUuid) {
            this.$set(obj, 'warnType', project.typeName)
          }
          return obj
        })
      },
      enterSingleVideo (item) {
        if (this.$local.get('login') === 'projectLogin') {
          if (window.PRODUCT_BACK) {
            this.$router.push({name: 'screenVideoControl', query: {cameraId: item.cameraUuid, name: this.$route.query.name, pjId: item.projectId, backBtn: true}})
          } else {
            this.$router.push({name: 'screenVideoControl', query: {cameraId: item.cameraUuid, name: this.$route.query.name, pjId: item.projectId}})
          }
        } else {
          this.$router.push({name: 'videoControl', query: {cameraId: item.cameraUuid, name: this.$route.query.name, pjId: item.projectId}})
        }
      },
      searchCameraList (value) {
        let data = {
          departmentId: this.$route.query.departmentId,
          mid: this.currentUser.mid,
          coId: this.currentUser.coId,
          projectName: value
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getProjectPassCheckByOnlineVideos`,
          data: this.$qs.stringify(data)
        }).then(res => {
          console.log(res)
        })
      },
      initInterval (status = false) {
        if (this.pages > 1) {
          if (status) {
            window.clearInterval(this.interval)
          } else {
            this.interval = setInterval(() => {
              if (this.pages === this.pageNum) {
                this.pageNum = 0
              }
              this.pageNum++
              this.getList()
            }, 1000 * this.video.time)
          }
        }
      },
      prev () {
        if (this.pageNum === 1) {
        } else {
          window.clearInterval(this.interval)
          this.interval = null
          this.pageNum--
          this.getList()
        }
      },
      next () {
        if (this.pageNum === this.pages) {
        } else {
          window.clearInterval(this.interval)
          this.interval = null
          this.pageNum++
          this.getList()
        }
      },
      getProjectOnlineRate () {
        if (!this.$route.query.pjId) return
        let url = 'getProjectOnlineRate'
        let data = {
          projectId: this.$route.query.pjId
        }
        if (this.$local.get('login') === 'projectLogin') {
          data = {
            stageId: this.currentUser.stageId
          }
          url = 'queryOnlineByStageId'
        }
        this.$axios({
          method: 'post',
          closeMessage: true,
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/` + url,
          data: this.$qs.stringify(data)
        }).then(res => {
          let {beforeDev, beforeTotal, dev, devTotal} = res.data.data
          let devTotalRate = dev / devTotal
          this.projectRate.dev = dev
          if (devTotal) {
            this.projectRate.rate = devTotalRate.toFixed(2) * 100
          }
          if (beforeDev !== 0 && beforeTotal !== 0) {
            this.projectRate.devStatus = dev - beforeDev
            this.projectRate.rateStatus = (devTotalRate - beforeDev / beforeTotal).toFixed(2) * 100
          }
        })
      },
      reset (status) {
        this.pageNum = 1
        window.clearInterval(this.interval)
        this.interval = null
        this.getList(status)
      },
      getList (isEditTime = false) {
        if (!this.$route.query.pjId) return
        let url = 'getProjectVideoPageNation'
        let data = {
          projectId: this.$route.query.pjId,
          userMid: this.currentUser.mid,
          pageNum: this.pageNum
        }
        if (this.$local.get('login') === 'projectLogin') {
          data = {
            stageId: this.currentUser.stageId,
            projectId: this.$route.query.pjId,
            userMid: this.currentUser.mid,
            page: this.pageNum,
            pageSize: this.video.windsNum,
            broadCastSecond: this.video.time
          }
          url = 'getStageVideoPageNation'
        }
        if (isEditTime) {
          data['windsNum'] = this.video.windsNum
          data['broadCastSecond'] = this.video.time
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          closeSaveRequest: true,
          url: `${this.$site.videoServer}/api/hikvision8700/` + url,
          data: this.$qs.stringify(data)
        }).then(res => {
          const {deviceVideoList, project, userRecord, projectStage} = res.data.data
          if (deviceVideoList === null) {
            this.deviceVideoList = []
            return
          }
          this.$store.commit('editVideo', {windsNum: userRecord.windsNum, time: userRecord.broadCastSecond, query: false})
          this.pages = deviceVideoList.pages
          if (project) {
            this.projectNameObject = project.projectTitle
          }
          if (projectStage) {
            this.projectNameObject = projectStage.stageName
          }
          if (this.isFirstQuery) {
            this.isFirstQuery = false
            if (this.$Browser().trident) {
              this.$nextTick(() => {
                setTimeout(() => {
                  this.$refs.mulvideo.InitMpvx()
                }, 2000)
              })
            }
          } else {
            this.deviceVideoList = deviceVideoList.dataList.map((item) => {
              item.warnType = ''
              if (this.warnList.length > 0) {
                this.warnList.forEach(warn => {
                  if (item.deviceVideoUuid === warn.deviceVideoUuid) {
                    this.$set(item, 'warnType', warn.typeName)
                  }
                })
              }
              return item
            })
            if (!this.interval) {
              this.initInterval()
            }
          }
        }).catch(res => {
          setTimeout(() => {
            this.SHOW_LOADING = false
          }, 3000)
        })
      },
      initSuccess () {
        this.getList()
        this.SHOW_LOADING = false
      }
    }
  }
</script>

<style lang="scss" scoped>

  #iframeBGI {
    position:fixed;
    visibility:inherit;
    top:190px;
    left:30px;
    height:2000px;
    z-index: 2;
    background: rgba(0,0,0,.1);
  }

  #iframeBGC {
    position: fixed;top: 58%;left:40%;height:600px;z-index: 3;transform: translate(-50%,-50%);background-color: #091f2d;
  }

  .icon-shexiangtou{
    display: block;
    color: #f2f2f2;
    margin-top: 18px;
    >span{
      margin-left: 10px;
      letter-spacing: 2px;
      cursor: pointer;
      font-family: "microsoft yahei";
    }
  }

  .project-next{
    width: 150px;
    height: 25px;
    position: absolute;
    bottom: 20px;
    left: 105px;
    >div{
      width: 65px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background: rgba(71, 159, 205, 0.15);
      box-shadow: 0 0 5px 2px rgba(71, 159, 205, 0.35) inset;
      cursor: pointer;
      i{
        font-size: 13px;
        font-weight: bolder;
        color: #00e5ff;
      }
    }
    .project-not-allowed{
      cursor: not-allowed;
      opacity: 0.7;
    }
  }
</style>
